<template>
	<view class="main">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="main-box">
			<view class="main-body" v-for="(item,index) in listdata" :key="index">
				<view class="container">
					<view class="top-box">
						<view class="info-icon">
							<image :src="item.avatar" class="info-img"></image>
						</view>
						<view class="right-box">
							<view class="info-box">
								<view class="name">{{item.name}}<text class="tips">业主</text><text class="text" v-if="item.status == 0">{{item.status_desc}}</text></view>
								<!-- <view class="untieBtn" @tap="applyUnbind">申请解绑</view> -->
								<view class="btn-box">
									<!-- <view class="untieBtn" v-if="item.status == 0 && item.status_desc">{{item.status_desc}}</view> -->
									<view class="untieBtn" v-if="item.status == 2 && item.status_desc">{{item.status_desc}}</view>
									<view class="untieBtn" v-if="item.status == 3 && item.status_desc" @tap="openPopup(item.bind_pigcms_id)">{{item.status_desc}}</view>
									<!-- <view class="untieBtn1" v-if="item.status == 0 && item.del_status_desc">{{item.del_status_desc}}</view> -->
									<view class="untieBtn1" style="color: #2681F3;" v-if="item.status == 2 && item.del_status_desc" @tap="deleteMe(item.pigcms_id)">{{item.del_status_desc}}</view>
									<view class="untieBtn1" v-if="item.status == 3 && item.del_status_desc">{{item.del_status_desc}}</view>
								</view>
							</view>
							<view class="address">{{item.room_address}}</view>
						</view>
					</view>
				</view>
				<uni-collapse :accordion="true" v-if="item.child_list[0]">
					<uni-collapse-item title="我的家属/租客" :animation="true">
						<view class="content" v-for="(items,indexs) in item.child_list" :key="indexs">
							<view class="info-icon1">
								<image :src="items.child_avatar" class="info-img1"></image>
							</view>
							<view class="right-box1">
								<view class="info-box1">
									<view class="name1">{{items.name}}</view>
									<view><text class="tips1">{{items.type_desc}}</text></view>
								</view>
								<view v-if="items.status == 1">
									<view style="width: 100rpx;height: 60rpx;display: flex;justify-content: flex-end;align-items: center;" @tap="deletefamily(items.pigcms_id,items.village_id)">
										<view class="delete">
											<image src="../../../static/images/delete.png" class="delete-img"></image>
										</view>
									</view>
								</view>
								<view v-if="items.status == 2">
									<view class="btn-box">
										<view class="untieBtn" @tap="confirmbind(items.village_id,items.pigcms_id)">确认绑定</view>
										<view class="untieBtn1" @tap="openPopups(items.village_id,items.pigcms_id)" style="color: #2681f3;">拒绝绑定</view>
									</view>
								</view>

							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>

			<view class="main-body" v-for="(item,index) in numlist">
				<view class="container">
					<view class="top-box">
						<view class="info-icon">
							<image :src="item.vacancy_avatar" class="info-img"></image>
						</view>
						<view class="right-box">
							<view class="info-box">
								<view class="name">{{item.name}}
									<text class="tips" v-if="item.type == 0">{{item.type_desc}}</text>
									<text class="tips" style="background: rgb(108, 165, 255);" v-if="item.type == 1">{{item.type_desc}}</text>
									<text class="tips" style="background: rgb(30, 209, 159);" v-if="item.type == 2">{{item.type_desc}}</text>
									<text class="text" v-if="item.status == 0">{{item.desc}}</text>
								</view>
								<view class="btn-box">
									<view class="untieBtn" v-if="item.status == 0 && item.status_desc" @tap="rejoin(item.vacancy_id)">{{item.status_desc}}</view>
									<view class="untieBtn" v-if="item.status == 1 && item.status_desc && item.unbind_status > 0">{{item.status_desc}}</view>
									<view class="untieBtn" v-if="item.status == 1 && item.status_desc && item.unbind_status <= 0" @tap="openPopup(item.pigcms_id)">{{item.status_desc}}</view>
									<view class="untieBtn" v-if="item.status == 2 && item.status_desc">{{item.status_desc}}</view>
									<view class="untieBtn1" v-if="item.status == 0 && item.del_status_desc">{{item.del_status_desc}}</view>
									<view class="untieBtn1" v-if="item.status == 1 && item.del_status_desc">{{item.del_status_desc}}</view>
									<view class="untieBtn1" style="color: #2681F3;" v-if="item.status == 2 && item.del_status_desc" @tap="deleteMe1(item.pigcms_id)">{{item.del_status_desc}}</view>
								</view>
							</view>
							<view class="address">{{item.room_address}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="left-text" @tap="gojoinhouse">加入房屋</view>
			<view class="right-text" @tap="gobindfamily">绑定家属</view>
		</view>
		<!-- 弹层 -->
		<view>
			<uni-popup ref="popup" type="center" :maskClick="false">
				<view class="popup-text">请告诉我们您解绑原因</view>
				<textarea value="" v-model="unbindtext" class="area" placeholder-style="text5" placeholder="请输入您解绑的原因" />
				<view class="btn-box1">
					<button type="primary" class="btn1" @tap="closePopup">关闭</button>
					<button type="primary" class="btn2" @tap="applyUnbind">提交</button>
				</view>
			</uni-popup>
		</view>
		<!-- 家属弹层 -->
		<view>
			<uni-popup ref="popups" type="center" :maskClick="false">
				<view class="popup-text">请告诉我们您解绑原因</view>
				<textarea value="" v-model="unbindtext" class="area" placeholder-style="text5" placeholder="请输入您解绑的原因" />
				<view class="btn-box1">
					<button type="primary" class="btn1" @tap="closePopup">关闭</button>
					<button type="primary" class="btn2" @tap="applyUnbinds">提交</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	import uniCollapse from '../component/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../component/uni-collapse-item/uni-collapse-item.vue'
	import villageChooseHouse from '../../../appComponent/villagePage/villageChooseHouse';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getmyVillageList = () => {
		common.post('HouseApi&a=my_village_list', {}, data => {
			console.log('++++', data)
			// _this.numlist = data.now_village_bind;
			_this.listdata = data.my_village_list_data;
			_this.numlist = data.my_village_vacancy_data;
		});
	};
	const getdeletefamily = () => {
		common.post('HouseApi&a=delete_bind', {
			pigcms_id: _this.pigcms_id,
			village_id: _this.village_id
		}, data => {
			console.log('++++', data)
			getmyVillageList()
		});
	};
	const getdeleteApply = () => {
		common.post('HouseApi&a=delete_audit_yezhu', {
			pigcms_id:_this.pigcms_id
		}, data => {
			console.log('++++', data)
			// _this.numlist = data.now_village_bind;
			getmyVillageList()
		});
	};
	const getdeleteApply1 = () => {
		common.post('HouseApi&a=delete_audit', {
			pigcms_id:_this.pigcms_id
		}, data => {
			console.log('++++', data)
			// _this.numlist = data.now_village_bind;
			getmyVillageList()
		});
	};
	//业主解绑
	const getapplyUnbind = () => {
		common.post('HouseApi&a=user_unbind', {
			pigcms_id:_this.pigcms_id,
			note:_this.unbindtext
		}, data => {
			console.log('++++', data)
			_this.closePopup()
			uni.showModal({
				title: common.changeTxt('提示'),
				content: common.changeTxt('申请解绑成功'),
				showCancel: false,
				confirmText: common.changeTxt('确定'),
				success: function(res) {
					if (res.confirm) {
						getmyVillageList()
					}
				}
			});
		});
	};
	//家属解绑
	const getapplyUnbinds = () => {
		common.post('HouseApi&a=child_bind', {
			village_id:_this.village_id,
			pigcms_id:_this.pigcms_id,
			reason:_this.unbindtext,
			no_bind: _this.no_bind
		}, data => {
			console.log('++++', data)
			_this.closePopup()
			getmyVillageList()
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				type: '',
				add_pigcms_id: 0,
				is_notice: 0,
				unbindtext:'',
				no_bind: '',
				user_options: {},
				choose_options: {},
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				// const res = uni.getStorageSync('village_key');
				// if (res) {
				// 	_this.village_id = res.village_id;
				// 	_this.pigcms_id = res.pigcms_id;
				// 	_this.village_name = res.village_name;
				// };
				_this.showMyPage()
			});
		},
		methods: {
			gojoinhouse() {
				uni.navigateTo({
					url: '/pages/village/my/myvillageList'
				})
			},
			//重新加入
			rejoin(pigcms_id){
				uni.navigateTo({
					url: '/pages/village/my/joinHouse?pigcms_id=' + pigcms_id
				})
			},
			//申请解绑
			gobindfamily() {
				 uni.navigateTo({
				 	url: '/pages/village/my/bindFamily'
				 })
			},
			//删除业主下面的亲属
			deletefamily(pigcms_id,village_id){
				_this.pigcms_id = pigcms_id;
				_this.village_id = village_id;
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('确定删除吗？'),
					showCancel: true,
					cancelText: common.changeTxt('取消'),
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getdeletefamily()
						}else if (res.cancel) {
							
						}
					}
				});
			},
			//删除自己
			deleteMe(pigcms_id){
				_this.pigcms_id = pigcms_id;
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('确定删除吗？'),
					showCancel: true,
					cancelText: common.changeTxt('取消'),
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getdeleteApply();
						}
					}
				});
			},
			//删除自己
			deleteMe1(pigcms_id){
				_this.pigcms_id = pigcms_id;
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('确定删除吗？'),
					showCancel: true,
					cancelText: common.changeTxt('取消'),
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getdeleteApply1()
						} 
					}
				});
			},
			//弹层提交的解绑
			applyUnbind() {
				getapplyUnbind()
			},
			//家属弹层提交的解绑
			applyUnbinds() {
				_this.no_bind = 1
				getapplyUnbinds()
			},
			//业主解绑触发弹层
			openPopup(pigcms_id) {
				_this.pigcms_id = pigcms_id;
				console.log("lllllll",_this.pigcms_id)
				this.$refs.popup.open();
			},
			//家属解绑触发弹层
			openPopups(village_id,pigcms_id) {
				_this.village_id = village_id
				_this.pigcms_id = pigcms_id
				this.$refs.popups.open();
			},
			//家属确认解绑
			confirmbind(village_id,pigcms_id){
				_this.no_bind = '';
				_this.village_id = village_id;
				_this.pigcms_id = pigcms_id;
				getapplyUnbinds()
			},
			closePopup() {
				this.$refs.popup.close();
				this.$refs.popups.close();
			},
			showMyPage() {
				console.log('我的', app.globalData.is_login)
				const res = uni.getStorageSync('village_key');
				if (res) {
					if (_this.pigcms_id && _this.pigcms_id != res.pigcms_id) {
						console.log('换房子了', _this.pigcms_id, res.pigcms_id)
						_this.listData = {};
					}
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
					if (res.property_id && res.property_id > 0) {
						_this.property_id = res.property_id;
					}
				}
				if (app.globalData.is_login) {
			
					_this.choose_options = {};
			
					console.log('village_id----------', _this.village_id);
					console.log('pigcms_id++++++++', _this.pigcms_id);
					if (!_this.village_id) {
						console.log('village_id++++++++', _this.village_id);
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
							showCancel: false,
							confirmText: common.changeTxt('选择'),
							success: function(res) {
								if (res.confirm) {
									var url = '/pages/village/my/villagelist';
									if (_this.property_id && _this.property_id > 0) {
										url += '?property_id=' + _this.property_id;
									}
									uni.redirectTo({
										url: url
									});
								}
							}
						});
					} else if (!_this.pigcms_id) {
						
						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							after_event: '',
							canCancle: false,
							bindHasCancleMethod: false
						}
						console.log('choose_options', _this.choose_options);
					} else {
						getmyVillageList()
					}
				} else {
			
					_this.user_options = {
						toLogin: true
					};
				}
			},
			getUserInfo(e) {
				console.log('user.info', e.userInfo);
				if (e.userInfo) {
					_this.showMyPage();
				} else {
					uni.navigateBack();
				}
			},
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			uniPopup,
			villageChooseHouse
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245)
	}

	.main {
		margin-top: 30rpx;
		padding-bottom: 120rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		overflow-x: hidden;
		
	}
	.main-box {
		margin: 20rpx 30rpx 0rpx 30rpx;
	}
	.main-body {
		margin-top: 20rpx;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
	}

	.container {
		margin: 0;
		padding: 0;
		background: rgb(255, 255, 255);
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
	}

	.top-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.info-icon {
		width: 96rpx;
		height: 96rpx;
		flex-shrink: 0;
		border-radius: 100rpx;
	}

	.info-img {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 100rpx;
	}

	.right-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		margin-left: 15rpx;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.name {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.tips {
		background-color: #ffcf49;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.untieBtn {
		padding: 0 20rpx;
		height: 56rpx;
		border-radius: 30rpx;
		text-align: center;
		background-color: #2681f3;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 56rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.untieBtn1 {
		padding: 0 20rpx;
		margin-left: 15rpx;
		height: 56rpx;
		border-radius: 30rpx;
		text-align: center;
		background-color: rgb(202, 224, 252);
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 56rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.address {
		margin-top:8rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 1.5;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 30rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
	}

	.info-icon1 {
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
	}

	.info-img1 {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50rpx;
	}

	.right-box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-left: 15rpx;
	}

	.info-box1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between; 
	}

	.name1 {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #454545;
	}

	.tips1 {
		background-color: #1ed19f;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		text-align: center;
		padding: 2rpx 8rpx;
	}

	.delete {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.delete-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.left-text {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: -1rpx;
		text-align: center;
		color: #ffffff;
		background-color: #1ed19f;
		width: 100%;
	}

	.right-text {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: -1rpx;
		text-align: center;
		color: #ffffff;
		background-color: #2681f3;
		width: 100%;
	}

	.text {
		color: rgb(254, 67, 67);
		font-weight: normal;
		font-stretch: normal;
		line-height: 24rpx;
		letter-spacing: 0rpx;
	}
	.area {
		width: 460rpx;
		height: 190rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		margin-top: 30rpx;
		padding: 30rpx;
	}
	.btn-box1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 35rpx;
	}
	.btn2 {
		width: 200rpx;
		height: 76rpx;
		background-color: #2681f3 !important;
		border-radius: 38rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 76rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.btn1 {
		width: 200rpx;
		height: 76rpx;
		background-color: #e4e9ef !important;
		border-radius: 38rpx;
		font-size: 30rpx;
		border: 0rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 76rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}
	.popup-text {
		font-weight: 700;
	}
	.text5 {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #cbcbcb;
	}
	/deep/ uni-button:after {
		border: 0;
	}
	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		width: 580rpx;
		height: 480rpx;
		background-color: #f5faff;
		overflow: hidden;
	}
	/deep/ .uni-collapse {
		background: #f5f7fa;
	}
	/deep/ .uni-collapse-cell {
		background: #f5f7fa;
		border-bottom: 0rpx;
		
	}

	/deep/ .uni-collapse-cell__title {
		padding: 0 30rpx;
	}
</style>
